<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElDatePicker } from 'element-plus'
// 定义合法的日期选择器类型
type DatePickerType = 'week' | 'month' | 'year'

const tabs = ['在线听课人数', '课程购买量', '课程访问量']
const selectedTab = ref('在线听课人数')
const buttons = ['按周', '按月', '按年']
const selectedTimeType = ref('按周')
const value1 = ref('')
const datePickerType = ref<DatePickerType>('week')
const datePickerFormat = ref('yyyy 第 WW 周')

const selectTab = (tab: string) => {
  selectedTab.value = tab
}

const props = defineProps<{ modelValue: number[] }>()

const sonArray = ref<number[]>([])

const emit = defineEmits(['update:modelValue'])
// 生成随机数组
const generateRandomArray = () => {
  const arr = []
  for (let i = 0; i < 7; i++) {
    arr.push(Math.floor(Math.random() * 1000))
  }
  sonArray.value = arr
  emit('update:modelValue', sonArray.value)
}
watch(
  [selectedTab, selectedTimeType, value1],
  () => {
    generateRandomArray()
    console.log('1', 1)
  },
  {
    deep: true,
    immediate: true,
  },
)

const selectTimeType = (type: string) => {
  selectedTimeType.value = type
  switch (type) {
    case '按周':
      datePickerType.value = 'week'
      datePickerFormat.value = 'yyyy 第 WW 周'
      break
    case '按月':
      datePickerType.value = 'month'
      datePickerFormat.value = 'yyyy-MM'
      break
    case '按年':
      datePickerType.value = 'year'
      datePickerFormat.value = 'yyyy'
      break
  }
}
</script>

<template>
  <!-- {{ props }} -->
  <div v-show="false">{{ props }}</div>
  <div class="category-selector">
    <div class="tabs">
      <div
        v-for="tab in tabs"
        :key="tab"
        :class="['tab', { active: selectedTab === tab }]"
        @click="selectTab(tab)"
      >
        {{ tab }}
      </div>
    </div>
    <div class="time-selector">
      <div class="time-buttons">
        <button
          v-for="button in buttons"
          :key="button"
          :class="['time-button', { active: selectedTimeType === button }]"
          @click="selectTimeType(button)"
        >
          {{ button }}
        </button>
      </div>
      <div class="block">
        <el-date-picker
          v-model="value1"
          :type="datePickerType"
          :format="datePickerFormat"
          placeholder="选择时间"
        >
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<style scoped>
.category-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabs {
  display: flex;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  margin-right: 5px;
}

.tab.active {
  color: #007bff;
  border-color: #007bff;
  border-bottom: 4px solid #65ded7;
}

.time-selector {
  display: flex;
  align-items: center;
}

.time-buttons {
  margin-right: 10px;
}

.time-button {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  margin-right: 5px;
}

.time-button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.block {
  margin-left: 20px;
}
</style>
